<template>
	<view class="container">
		<!-- 动态组件：根据currentTab显示对应组件 -->
		<component :is="currentComponent" @saved="goToHomePage"></component>
		
		<tab-bar :current="currentTab" @tabChange="onTabChange" @addClick="onAddClick"></tab-bar>
	</view>
</template>

<script>
import TabBar from '@/components/TabBar.vue'
import HomePage from '@/components/HomePage.vue'
import AlarmRecords from '@/components/AlarmRecords.vue'
import AddDevice from '@/components/AddDevice.vue'
import DeviceMap from '@/components/DeviceMap.vue'
import MyProfile from '@/components/MyProfile.vue'

export default {
	components: {
		TabBar,
		HomePage,
		AlarmRecords,
		AddDevice,
		DeviceMap,
		MyProfile
	},
	data() {
		return {
			currentTab: 2 // 默认选中首页
		}
	},
	computed: {
		// 根据当前选中的tab返回对应的组件
		currentComponent() {
			switch(this.currentTab) {
				case 0: return 'HomePage'
				case 1: return 'AlarmRecords'
				case 2: return 'AddDevice'
				case 3: return 'DeviceMap'
				case 4: return 'MyProfile'
				default: return 'HomePage'
			}
		}
	},
	methods: {
		onTabChange(index) {
			console.log('Tab changed to:', index)
			this.currentTab = index
		},
		onAddClick() {
			console.log('Add button clicked')
			// 切换到添加设备页面标签
			this.currentTab = 2
		},
		goToHomePage() {
			// 当设备保存后，返回到首页
			setTimeout(() => {
				this.currentTab = 0
			}, 1500)
		}
	}
}
</script>

<style lang="scss">
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 100rpx;
}
</style>
